<template>
  <div class="customer-order-manage">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>我的订单</h1>
      <p>查看和管理您的所有订单</p>
    </div>

    <!-- 登录提示 -->
    <div v-if="!isLoggedIn" class="login-prompt">
      <div class="login-prompt-icon">📋</div>
      <h3>请先登录</h3>
      <p>登录后即可查看和管理您的所有订单</p>
      <div class="login-prompt-actions">
        <button class="btn-primary" @click="goToLogin">立即登录</button>
        <button class="btn-secondary" @click="goToRegister">注册账户</button>
      </div>
    </div>

    <!-- 登录后的内容 -->
    <div v-if="isLoggedIn">
    <!-- 订单状态标签页 -->
    <div class="order-tabs">
      <div 
        v-for="tab in orderTabs" 
        :key="tab.status"
        class="tab-item"
        :class="{ active: activeTab === tab.status }"
        @click="switchTab(tab.status)"
      >
        <span class="tab-label">{{ tab.label }}</span>
        <span class="tab-count" v-if="orderNumbers && getOrderCount(tab.status) > 0">{{ getOrderCount(tab.status) }}</span>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="order-list-container">
      <div class="order-content-wrapper">
        <div v-if="loading" class="loading-state">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>

        <div v-else-if="orderList.length === 0" class="empty-state">
          <div class="empty-icon">📦</div>
          <h3>暂无订单</h3>
          <p>{{ getEmptyMessage() }}</p>
        </div>

        <div v-else class="order-list">
        <div 
          v-for="order in orderList" 
          :key="order.orderId"
          class="order-item"
        >
          <div class="order-header">
            <div class="order-info">
              <span class="order-number">订单号：{{ order.orderId }}</span>
              <span class="order-date">{{ formatDate(order.createTime) }}</span>
            </div>
            <div class="order-status">
              <span class="order-name">{{ order.orderName }}</span>
            </div>
          </div>

          <!-- 按商家分组显示商品 -->
          <div 
            v-for="seller in order.orderCustomerBySellers" 
            :key="seller.sellerId"
            class="seller-section"
          >
            <div class="seller-header">
              <span class="seller-name">{{ seller.sellerName }}</span>
              <span class="seller-amount">¥{{ formatPrice(seller.totalPrice) }}</span>
            </div>
            
            <div class="products-list">
              <div 
                v-for="item in seller.orderItemVOList" 
                :key="item.id"
                class="product-item"
              >
                <div class="product-info">
                  <img 
                    :src="item.productImage || '/default-product.png'" 
                    :alt="item.productName"
                    class="product-image"
                  />
                  <div class="product-details">
                    <h4 class="product-name">{{ item.productName }}</h4>
                    <p class="product-spec">{{ item.skuName }}</p>
                    <span class="product-quantity">数量：{{ item.quantity }}</span>
                    <span class="product-price">单价：¥{{ formatPrice(item.price) }}</span>
                  </div>
                </div>
                <div class="item-status">
                  <span :class="getStatusClass(order.status)">
                    {{ getStatusText(order.status) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="order-footer">
            <div class="order-total">
              <span class="total-label">订单总额：</span>
              <span class="total-amount">¥{{ formatPrice(order.totalPrice) }}</span>
            </div>
            
            <div class="order-actions">
              <button 
                v-if="order.status === 0" 
                class="action-btn pay-btn"
                @click="payOrder(order)"
              >
                立即支付
              </button>
              <button 
                v-if="order.status === 0" 
                class="action-btn cancel-btn"
                @click="cancelOrder(order)"
              >
                取消订单
              </button>
              <button 
                v-if="order.status === 3" 
                class="action-btn confirm-btn"
                @click="confirmReceipt(order)"
              >
                确认收货
              </button>
              <button 
                class="action-btn detail-btn"
                @click="viewOrderDetail(order)"
              >
                查看详情
              </button>
            </div>
          </div>
        </div>
        </div>
      </div>

      <!-- 分页组件 -->
      <div class="pagination" v-if="totalItems > 0">
        <div class="page-size-selector">
          <span>每页显示：</span>
          <select v-model="pageSize" @change="changePageSize" class="page-size-dropdown">
            <option value="5">5条</option>
            <option value="10">10条</option>
            <option value="20">20条</option>
            <option value="50">50条</option>
          </select>
        </div>

        <button
          class="page-btn"
          @click="changePage(currentPage - 1)"
          :disabled="currentPage <= 1"
        >
          上一页
        </button>

        <div class="page-numbers">
          <button
            v-for="page in visiblePages"
            :key="page"
            class="page-number"
            :class="{ active: page === currentPage }"
            @click="changePage(page)"
          >
            {{ page }}
          </button>
        </div>

        <button
          class="page-btn"
          @click="changePage(currentPage + 1)"
          :disabled="currentPage >= totalPages"
        >
          下一页
        </button>

        <div class="page-info">
          第 {{ currentPage }} 页，共 {{ totalPages }} 页，总计 {{ totalItems }} 条
        </div>
      </div>
    </div>

    <!-- 订单详情弹窗 -->
    <div v-if="showOrderDetail" class="order-detail-modal" @click="closeOrderDetail">
      <div class="order-detail-content" @click.stop>
        <div class="modal-header">
          <h3>订单详情</h3>
          <button class="close-btn" @click="closeOrderDetail">×</button>
        </div>
        
        <div class="modal-body" v-if="loadingDetail" style="text-align: center; padding: 40px;">
          <div class="loading-spinner"></div>
          <p>加载订单详情中...</p>
        </div>
        
        <div class="modal-body" v-else-if="orderDetail">
          <!-- 订单基本信息 -->
          <div class="order-basic-info">
            <div class="info-row">
              <span class="label">订单号：</span>
              <span class="value">{{ orderDetail.orderId }}</span>
            </div>
            <div class="info-row">
              <span class="label">下单时间：</span>
              <span class="value">{{ formatDate(orderDetail.createTime) }}</span>
            </div>
            <div class="info-row" v-if="orderDetail.payTime">
              <span class="label">支付时间：</span>
              <span class="value">{{ formatDate(orderDetail.payTime) }}</span>
            </div>
            <div class="info-row" v-if="orderDetail.deliveryTime">
              <span class="label">发货时间：</span>
              <span class="value">{{ formatDate(orderDetail.deliveryTime) }}</span>
            </div>
            <div class="info-row" v-if="orderDetail.finishTime">
              <span class="label">完成时间：</span>
              <span class="value">{{ formatDate(orderDetail.finishTime) }}</span>
            </div>
            <div class="info-row">
              <span class="label">订单总额：</span>
              <span class="value total-price">¥{{ formatPrice(orderDetail.totalPrice) }}</span>
            </div>
          </div>

          <!-- 商家和商品信息 -->
          <div class="sellers-detail">
            <div 
              v-for="seller in orderDetail.orderCustomerBySellers" 
              :key="seller.sellerId"
              class="seller-detail-section"
            >
              <div class="seller-detail-header">
                <span class="seller-detail-name">{{ seller.sellerName }}</span>
                <span class="seller-detail-amount">¥{{ formatPrice(seller.totalPrice) }}</span>
              </div>
              
              <div class="products-detail-list">
                <div 
                  v-for="item in seller.orderItemVOList" 
                  :key="item.id"
                  class="product-detail-item"
                >
                  <img 
                    :src="item.productImage || '/default-product.png'" 
                    :alt="item.productName"
                    class="product-detail-image"
                  />
                  <div class="product-detail-info">
                    <h4 class="product-detail-name">{{ item.productName }}</h4>
                    <p class="product-detail-spec">{{ item.skuName }}</p>
                    <div class="product-detail-meta">
                      <span class="quantity">数量：{{ item.quantity }}</span>
                      <span class="price">单价：¥{{ formatPrice(item.price) }}</span>
                      <span class="total">小计：¥{{ formatPrice(item.totalPrice) }}</span>
                    </div>
                    <div class="product-status">
                      <span :class="getStatusClass(item.status)">
                        {{ getItemStatusText(item.status) }}
                      </span>
                    </div>
                    <div class="delivery-address" v-if="item.address">
                      <span class="address-label">收货地址：</span>
                      <span class="address-value">{{ item.address }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="close-modal-btn" @click="closeOrderDetail">关闭</button>
        </div>
      </div>
    </div>
    </div> <!-- 登录后的内容结束 -->
  </div>
</template>

<script>
import { getOrderNumber, getCustomerOrder } from '@/api/user'
import { createPayment } from '@/api/payment'
import { cancelOrder as cancelOrderApi, completeOrder as completeOrderApi } from '@/api/order'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'CustomerOrderManage',
  data() {
    return {
      loading: false,
      activeTab: 'all', // 当前激活的标签页
      orderNumbers: null, // 订单数量统计
      orderList: [], // 订单列表
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      totalPages: 0,
      
      // 订单状态标签配置
      orderTabs: [
        { status: 'all', label: '全部订单' },
        { status: 0, label: '待付款' },
        { status: 1, label: '待发货' },
        { status: 2, label: '待收货' },
        { status: 3, label: '已完成' },
        { status: 4, label: '已取消' }
      ],
      
      // 订单详情弹窗相关
      showOrderDetail: false,
      orderDetail: null,
      loadingDetail: false
    }
  },
  
  computed: {
    customerId() {
      // 从userRoles数组中获取customerId
      const userRolesStr = localStorage.getItem('userRoles')
      if (userRolesStr) {
        try {
          const userRoles = JSON.parse(userRolesStr)
          const customerRole = userRoles.find(role => role.code === 'CUSTOMER')
          return customerRole ? customerRole.id : null
        } catch (error) {
          console.error('解析userRoles失败:', error)
          return null
        }
      }
      return null
    },
    
    visiblePages() {
      const pages = []
      const start = Math.max(1, this.currentPage - 2)
      const end = Math.min(this.totalPages, this.currentPage + 2)
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    },
    
    // 检查用户登录状态
    isLoggedIn() {
      const userToken = localStorage.getItem('userToken')
      const userRoles = localStorage.getItem('userRoles')
      return !!(userToken && userRoles)
    }
  },
  
  mounted() {
    // 只在登录状态下才加载订单数据
    if (this.isLoggedIn) {
      this.loadOrderNumbers()
      this.loadOrderList()
    }
  },
  
  methods: {
    // 加载订单数量统计
    async loadOrderNumbers() {
      if (!this.customerId) {
        console.error('未找到顾客ID')
        return
      }
      
      try {
        const response = await getOrderNumber(this.customerId)
        this.orderNumbers = response.data || response
      } catch (error) {
        console.error('获取订单数量统计失败:', error)
        this.$message?.error('获取订单统计失败')
      }
    },
    
    // 加载订单列表
    async loadOrderList() {
      if (!this.customerId) {
        console.error('未找到顾客ID')
        return
      }
      
      this.loading = true
      try {
        const response = await getCustomerOrder(
          this.currentPage,
          this.pageSize,
          this.customerId,
          this.activeTab
        )
        
        const data = response.data || response
        this.orderList = data.list || []
        this.totalItems = data.total || 0
        this.totalPages = Math.ceil(this.totalItems / this.pageSize)
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.$message?.error('获取订单列表失败')
        this.orderList = []
        this.totalItems = 0
        this.totalPages = 0
      } finally {
        this.loading = false
      }
    },
    
    // 切换标签页
    switchTab(status) {
      this.activeTab = status
      this.currentPage = 1
      this.loadOrderList()
    },
    
    // 获取订单数量
    getOrderCount(status) {
      if (!this.orderNumbers) return 0
      
      switch (status) {
        case 'all':
          return (this.orderNumbers.unpaidOrderNumber || 0) +
                 (this.orderNumbers.waitingForDeliveryOrderNumber || 0) +
                 (this.orderNumbers.waitingForReceiptOrderNumber || 0) +
                 (this.orderNumbers.completedOrderNumber || 0) +
                 (this.orderNumbers.canceledOrderNumber || 0)
        case 0:
          return this.orderNumbers.unpaidOrderNumber || 0
        case 1:
          return this.orderNumbers.waitingForDeliveryOrderNumber || 0
        case 2:
          return this.orderNumbers.waitingForReceiptOrderNumber || 0
        case 3:
          return this.orderNumbers.completedOrderNumber || 0
        case 4:
          return this.orderNumbers.canceledOrderNumber || 0
        default:
          return 0
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待付款',
        1: '待发货',
        2: '待发货',
        3: '待收货',
        4: '已完成',
        5: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getItemStatusText(status){

      const statusItemMao ={
        0:"待发货",
        1:"待收货",
        2:"已完成",
        3:"已取消"
      }
      console.log("商品状态:", status, statusItemMao[status])
      return statusItemMao[status]

    },
    // 检查订单是否有未支付的商品
    hasUnpaidItems(order) {
      return order.orderCustomerBySellers.some(seller => 
        seller.orderItemVOList.some(item => item.status === 0)
      )
    },
    
    // 检查订单是否有待收货的商品
    hasWaitingReceiptItems(order) {
      return order.orderCustomerBySellers.some(seller => 
        seller.orderItemVOList.some(item => item.status === 2)
      )
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        0: 'status-unpaid',
        1: 'status-pending',
        2: 'status-pending',
        3: 'status-shipping',
        4: 'status-completed',
        5: 'status-canceled'
      }
      return `order-status-badge ${classMap[status] || ''}`
    },
    
    // 获取空状态消息
    getEmptyMessage() {
      const messageMap = {
        'all': '您还没有任何订单',
        0: '您暂无待付款订单',
        1: '您暂无待发货订单',
        2: '您暂无待收货订单',
        3: '您暂无已完成订单',
        4: '您暂无已取消订单'
      }
      return messageMap[this.activeTab] || '暂无相关订单'
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
    },
    
    // 格式化价格
    formatPrice(price) {
      return parseFloat(price || 0).toFixed(2)
    },
    
    // 分页相关方法
    changePage(page) {
      if (page < 1 || page > this.totalPages) return
      this.currentPage = page
      this.loadOrderList()
    },
    
    // 改变页面大小
    changePageSize() {
      // 确保pageSize是数字类型
      const newPageSize = parseInt(this.pageSize)
      
      // 验证pageSize值的有效性
      if (isNaN(newPageSize) || newPageSize <= 0) {
        console.error('无效的pageSize值:', newPageSize)
        return
      }
      
      this.pageSize = newPageSize
      // 重置到第一页
      this.currentPage = 1
      this.loadOrderList()
    },
    
    // 订单操作方法
    async payOrder(order) {
      this.$router.push(`/order/${order.orderId}`)
    },
    
    // 确认收货
    async confirmReceipt(order) {
      try {
        await ElMessageBox.confirm(
          `确认收货订单 ${order.orderNumber || order.orderId} 吗？`,
          '确认收货',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        await completeOrderApi(order.orderId)
        ElMessage.success('确认收货成功')
        // 刷新订单列表和统计
        this.loadOrderNumbers()
        this.loadOrderList()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('确认收货失败:', error)
          ElMessage.error('确认收货失败，请稍后重试')
        }
      }
    },
    
    // 取消订单
    async cancelOrder(order) {
      if (confirm(`确认取消订单 ${order.orderNumber || order.orderId} 吗？`)) {
        try {
          await cancelOrderApi(order.orderId)
          this.$message?.success('订单取消成功')
          // 刷新订单列表和统计
          this.loadOrderNumbers()
          this.loadOrderList()
        } catch (error) {
          console.error('取消订单失败:', error)
          this.$message?.error('取消订单失败，请稍后重试')
        }
      }
    },
    
    async viewOrderDetail(order) {
      try {
        this.loadingDetail = true
        this.showOrderDetail = true
        
        // 调用API获取订单详情
        const response = await fetch(`/api/orders/queryOrderMessage?orderId=${order.orderId}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('userToken') || ''}`
          }
        })
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        
        const data = await response.json()
        this.orderDetail = data
        
      } catch (error) {
        console.error('获取订单详情失败:', error)
        this.$message?.error('获取订单详情失败，请稍后重试')
        this.showOrderDetail = false
      } finally {
        this.loadingDetail = false
      }
    },
    
    closeOrderDetail() {
      this.showOrderDetail = false
      this.orderDetail = null
    },
    
    // 跳转到登录页面
    goToLogin() {
      this.$router.push('/customer-login')
    },
    
    // 跳转到注册页面
    goToRegister() {
      this.$router.push('/customer-login')
    }
  }
}
</script>

<style>
/* 全局样式重置 - 确保页面可以滚动 */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
}

/* 登录提示样式 */
.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px 20px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  margin: 20px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.login-prompt-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.login-prompt h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: white;
}

.login-prompt p {
  font-size: 16px;
  margin-bottom: 30px;
  opacity: 0.9;
  line-height: 1.6;
}

.login-prompt-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.login-prompt-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.btn-primary {
  background: white;
  color: #667eea;
}

.btn-primary:hover {
  background: #f8f9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-cancel {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

#app {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
}
</style>

<style scoped>
.customer-order-manage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;

  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 页面头部 */
.page-header {
  background: white;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

/* 订单状态标签页 */
.order-tabs {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.tab-item {
  flex: 1;
  min-width: 120px;
  padding: 15px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item:hover {
  background-color: #f8f9fa;
}

.tab-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.tab-label {
  font-size: 16px;
  font-weight: 500;
}

.tab-count {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e74c3c;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.tab-item.active .tab-count {
  background: #c0392b;
  color: white;
}

/* 订单列表容器 */
.order-list-container {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 订单内容包装器 */
.order-content-wrapper {
  /* 移除特殊样式，使用正常文档流 */
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 60px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.empty-state h3 {
  margin: 0 0 10px 0;
  color: #333;
}

/* 订单列表 */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  border: 1px solid #e9ecef;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.order-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
  border-color: #007bff;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  position: relative;
}

.order-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #007bff, #0056b3);
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-number {
  font-weight: 700;
  color: #2c3e50;
  font-size: 17px;
  letter-spacing: 0.5px;
}

.order-date {
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
}

.order-status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.status-unpaid {
  background-color: #ffeaa7;
  color: #d63031;
}

.status-pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-shipping {
  background-color: #d4edda;
  color: #155724;
}

.status-completed {
  background-color: #e2e3e5;
  color: #383d41;
}

.status-canceled {
  background-color: #f8d7da;
  color: #721c24;
}

.order-content {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 20px;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.product-image {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-image:hover {
  transform: scale(1.05);
  border-color: #007bff;
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-spec {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
  background: #f8f9fa;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}

.product-quantity {
  color: #495057;
  font-size: 14px;
  font-weight: 600;
}

.product-price {
  color: #e74c3c;
  font-size: 15px;
  font-weight: 700;
}

.order-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 120px;
}

.amount-label {
  color: #666;
  font-size: 14px;
}

.amount-value {
  color: #e74c3c;
  font-size: 18px;
  font-weight: 600;
}

.order-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  min-width: 200px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.action-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  min-width: 80px;
  text-align: center;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pay-btn {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.pay-btn:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
}

.confirm-btn {
  background: linear-gradient(135deg, #27ae60, #229954);
  color: white;
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #229954, #1e8449);
}

.cancel-btn {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
}

.cancel-btn:hover {
  background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
}

.detail-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.detail-btn:hover {
  background: linear-gradient(135deg, #2980b9, #2471a3);
}

.item-status {
  display: flex;
  align-items: center;
  min-width: 100px;
  justify-content: center;
}

.item-status span {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-width: 80px;
}

/* 订单底部区域 */
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-top: 1px solid #dee2e6;
  border-radius: 0 0 16px 16px;
}

/* 商家区域样式 */
.seller-section {
  padding: 20px 24px;
  border-bottom: 1px solid #f1f3f4;
  background: #ffffff;
}

.seller-section:last-child {
  border-bottom: none;
}

.seller-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  border-left: 4px solid #28a745;
}

.seller-name {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  display: flex;
  align-items: center;
}

.seller-name::before {
  content: '🏪';
  margin-right: 8px;
  font-size: 18px;
}

.seller-amount {
  font-size: 16px;
  font-weight: 700;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  padding: 6px 12px;
  border-radius: 20px;
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  border-color: #007bff;
}

/* 订单总额样式 - 高亮显示 */
.order-total {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(231, 76, 60, 0.1);
  padding: 12px 16px;
  border-radius: 25px;
  border: 2px solid rgba(231, 76, 60, 0.2);
}

.total-label {
  color: #495057;
  font-size: 16px;
  font-weight: 600;
}

.total-amount {
  color: #e74c3c;
  font-size: 22px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 操作按钮区域 - 小尺寸横向排列 */
.order-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.order-actions .action-btn {
  padding: 6px 12px;
  font-size: 12px;
  min-width: 70px;
  height: 32px;
  border-radius: 4px;
}

/* 分页组件 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px 0;
  border-top: 1px solid #e9ecef;
}

/* 页面大小选择器 */
.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
}

.page-size-selector span {
  color: #666;
  font-size: 14px;
  white-space: nowrap;
}

.page-size-dropdown {
  padding: 6px 10px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  color: #495057;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.page-size-dropdown:hover {
  border-color: #667eea;
}

.page-size-dropdown:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.page-btn, .page-number {
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  background: white;
  color: #495057;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled), .page-number:hover {
  background-color: #e9ecef;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-number.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.page-info {
  color: #666;
  font-size: 14px;
  margin-left: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .customer-order-manage {
    padding: 10px;
  }
  
  .order-tabs {
    flex-wrap: wrap;
  }
  
  .tab-item {
    min-width: 100px;
    padding: 12px 15px;
  }
  
  .order-content {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .order-footer {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .seller-section {
    padding: 16px 20px;
  }
  
  .seller-header {
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .product-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }
  
  .product-info {
    width: 100%;
  }
  
  .product-image {
    width: 70px;
    height: 70px;
  }
  
  .item-status {
    width: 100%;
    justify-content: flex-start;
  }
  
  .order-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    min-width: auto;
    width: 100%;
  }
  
  .order-actions .action-btn {
    min-width: 70px;
    font-size: 12px;
    padding: 8px 12px;
  }
  
  .pagination {
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .page-size-selector {
    margin-right: 0;
    margin-bottom: 10px;
    order: -1;
    width: 100%;
    justify-content: center;
  }
  
  .page-size-selector span {
    font-size: 13px;
  }
  
  .page-size-dropdown {
    font-size: 13px;
    min-width: 70px;
  }
  
  .page-info {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
}

/* 订单详情弹窗样式 */
.order-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.order-detail-content {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border-radius: 20px 20px 0 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.modal-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

/* 订单基本信息样式 */
.order-basic-info {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border-left: 4px solid #007bff;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.info-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.info-row .label {
  font-weight: 600;
  color: #495057;
  min-width: 100px;
}

.info-row .value {
  color: #2c3e50;
  font-weight: 500;
}

.info-row .total-price {
  color: #e74c3c;
  font-size: 18px;
  font-weight: 700;
}

/* 商家详情区域样式 */
.sellers-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.seller-detail-section {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.seller-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
}

.seller-detail-name {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.seller-detail-name::before {
  content: '🏪';
  margin-right: 8px;
  font-size: 18px;
}

.seller-detail-amount {
  font-size: 16px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
}

.products-detail-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-detail-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.product-detail-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.product-detail-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #e9ecef;
  flex-shrink: 0;
}

.product-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-detail-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.4;
}

.product-detail-spec {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
  background: white;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}

.product-detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.product-detail-meta span {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: white;
}

.product-detail-meta .quantity {
  color: #495057;
}

.product-detail-meta .price {
  color: #007bff;
}

.product-detail-meta .total {
  color: #e74c3c;
}

.product-status {
  margin-top: 8px;
}

.delivery-address {
  margin-top: 8px;
  padding: 8px 12px;
  background: white;
  border-radius: 8px;
  border-left: 3px solid #28a745;
}

.address-label {
  font-weight: 600;
  color: #495057;
}

.address-value {
  color: #2c3e50;
  margin-left: 8px;
}

.modal-footer {
  padding: 20px 24px;
  background: #f8f9fa;
  border-radius: 0 0 20px 20px;
  text-align: center;
}

.close-modal-btn {
  background: linear-gradient(135deg, #6c757d, #495057);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.close-modal-btn:hover {
  background: linear-gradient(135deg, #495057, #343a40);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .order-detail-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 16px 20px;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .product-detail-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .product-detail-image {
    width: 80px;
    height: 80px;
  }
  
  .product-detail-meta {
    justify-content: center;
  }
  
  .seller-detail-header {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
</style>